<template>
	<van-tabs :active="active" @click="onClick()">
	  <van-tab title="全部" name="全部" >
		  <view v-for=" item in dateList" :key="item.orderNo">
		  	<van-card
		  	  :num= "item.participant"
		  	  :price= "item.totalMoney"
		  	  :desc= "item.payment"
		  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
		  	>
		  	  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
		  	  </view>
		  	</van-card>
		  </view>
	  </van-tab>
	  <van-tab title="待支付" name="待支付"  >
		  <view v-for=" item in dateList" :key="item.orderNo" >
		  	<van-card
		  	  :num= "item.participant"
		  	  :price= "item.totalMoney"
		  	  :desc= "item.payment"
		  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
		  	>
		  	  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
		  	  </view>
		  	</van-card>
		  </view>
	  </van-tab>
	  <van-tab title="已支付" name="已支付">
		  <view v-for=" item in dateList" :key="item.orderNo" >
		  	<van-card
		  	  :num= "item.participant"
		  	  :price= "item.totalMoney"
		  	  :desc= "item.payment"
		  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
		  	>
		  	  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
		  	  </view>
		  	</van-card>
		  </view>
	  </van-tab>
	  <van-tab title="待参加" name="待参加">
		  <view v-for=" item in dateList"  :key="item.orderNo">
		  	<van-card
		  	  :num= "item.participant"
		  	  :price= "item.totalMoney"
		  	  :desc= "item.payment"
		  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
		  	>
		  	  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
		  	  </view>
		  	</van-card>
		  </view>
	  </van-tab>
	  <van-tab title="已完成" name="已完成" >
		  <view v-for=" item in dateList"  :key="item.orderNo">
			<van-card
		  	  :num= "item.participant"
		  	  :price= "item.totalMoney"
		  	  :desc= "item.payment"
		  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
			>
			  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
			  </view>
			</van-card>
		  </view>
	  </van-tab>
	  <van-tab title="已过期" name="已过期" >
	  		  <view v-for=" item in dateList" :key="item.orderNo">
	  			<van-card
					:num= "item.participant"
					:price= "item.totalMoney"
					:desc= "item.payment"
			  	  :title= "item.status"
		  	  thumb="https://t7.baidu.com/it/u=2471051649,2314656574&fm=193&f=GIF"
	  			>
	  			  <view slot="footer">
		  	    <van-button size="mini" @click="gotoPay(item.orderNo)">查看详情</van-button>
	  			  </view>
	  			</van-card>
	  		  </view>
	  </van-tab>
	</van-tabs>
</template>

<script>
	export default {
		data() {
			return {
				active: "全部",
				order: {
					orderNo: '',
					totalMoney: '',
					status: ''
				},
				dateList: []
			}
		},
		methods: {
			onClick(event) {
				console.log(event.detail.name)
				this.getOrderByType(event.detail.name)
				
			  },
			gotoPay(orderNo) {
				console.log(orderNo)
				uni.navigateTo({
				    url: '/pages/order/pay?orderNo='+orderNo
				});
			},
			 getAllOrder(){
				uni.request({
				    url: 'http://localhost:8086/order/findAll', //仅为示例，并非真实接口地址。
				    data: {},
				    success: (res) => {
				        console.log(res.data);
				        this.dateList=res.data.data;
				    }
				});
			},
			getOrderByType(status){
				console.log("status",status)
				uni.request({
				    url: 'http://localhost:8086/order/findByStatus', //仅为示例，并非真实接口地址。
				    data: {
						status: status
					},
				    success: (res) => {
				        console.log(res.data);
				        this.dateList=res.data.data;
				    }
				});
			}
		},
		onLoad(options) {
			this.getAllOrder();
		}

	}
</script>


<style>
</style>
